<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <a href="#/login">点我登陆</a>
    <a href="#/register">点我注册</a>

<!--显示路由组件-->
    <router-view></router-view>
</div>

<script src="./js/vue.js"></script>
<script src="./js/vue-router.js"></script>
<script>
    //声明组件
    const login =
        {
            template: '<h1>登陆</h1>'
        }
    //声明组件
    const register =
        {
            template: '<h1>注册</h1>'
        }





    //创建路由对象
    const router= new VueRouter(
        {
            routes:
                [
                    //放置配置对象 把组件放入对应的路由路径 不用在vue实例对象中注册
                    {path: '/login' ,component:login}, //路由路径 component： 路由对应的路径
                    {path: '/register',component:register }
                ]
        }
    )



    const app = new Vue(
        {
            el: "#app",
            data: {},
            methods: {},
            //设置路由对象
            router : router


        }
    )
</script>
</body>
</html>